import { Input, Form, Button, Card, Space, Breadcrumb, } from "antd"
import { useCommodity } from "../../hook/commodity";
import { useHistory } from 'react-router';
const { TextArea } = Input;

export default () => {

    const [,{ commodityAdd }] = useCommodity();

    const history = useHistory();
    // 拿到输入的数据 value
    const onFinish = values => {
;
        commodityAdd(values)
    };
    // history.push('/info/commodity')

    // 获取本地存储数据
    const data = JSON.parse(sessionStorage.getItem("commodityData"));

    const upimg = () => {
        // diao
        history.push('/info/uploadImgs');
    };

    // const commodityAdd = () => {
    //     addCommodity(values)
    //     history.push("/info/commodity")
    // }

    return (
        <Space direction="vertical" style={{ width: "100%" }}>
            <Card >
                <Breadcrumb>
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/#/info/commodity">商品列表</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/#/info/addcommodity" style={{ fontSize: "16px" }}>新增商品</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
            </Card>
            <Card>
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    autoComplete="off"
                    initialValues={data}
                >
                    <Form.Item label="商品名称" name="name" style={{ width: "400px" }}>
                        <Input allowClear={true} />
                    </Form.Item>

                    <Form.Item label="保质期" name="guarantee" style={{ width: "400px" }} >
                        <Input allowClear={true} />
                    </Form.Item>
                    <Form.Item label="存储条件" name="storeCondition" style={{ width: "400px" }} >
                        <Input allowClear={true} />
                    </Form.Item>
                    <Form.Item label="产地" name="place" style={{ width: "400px" }} >
                        <Input allowClear={true} />
                    </Form.Item>
                    <Form.Item label="规格" name="specs" style={{ width: "400px" }} >
                        <Input allowClear={true} />
                    </Form.Item>
                    <Form.Item label="包装" name="pack" style={{ width: "400px" }} >
                        <Input allowClear={true} />
                    </Form.Item>
                    <Form.Item label="销量" name="sales" style={{ width: "400px" }} >
                        <Input allowClear={true} />
                    </Form.Item>
                    <Form.Item label="售后" name="aftersale" style={{ width: "400px" }} >
                        <Input allowClear={true} />
                    </Form.Item>
                    <Form.Item label="商品描述" name="desc" style={{ width: "400px" }} >
                        <TextArea rows={4} allowClear={true} />
                    </Form.Item>

                    <Form.Item style={{ marginLeft: "135px" }}>
                        <Button type="primary" htmlType="submit" name="makeSure" style={{ marginRight: "20px" }}>
                            确认新增
                        </Button>
                        <Button type="primary" name="uploadImg" onClick={upimg} >
                            上传图片
                        </Button>
                    </Form.Item>

                </Form>
            </Card>
        </Space>
    )
}